<script lang="ts" setup>
import { computed, ref } from 'vue'

const props = defineProps({
  data: {
    type: Array,
    default: () => ([]),
  },
})

// 瀑布流全部数据
const list = ref<any[]>([])
// 瀑布流第一列数据
const list1 = ref<any[]>([])
// 瀑布流第二列数据
const list2 = ref<any[]>([])

watch(() => props.data, (data) => {
  list.value = data
}, { deep: true })

// 间距配置
const leftGap = ref(10)
const rightGap = ref(10)
const columnGap = ref(10)

// 图片样式计算
const imageStyle = computed(() => {
  return (item: any) => {
    const v = uni.upx2px(750) - leftGap.value - rightGap.value - columnGap.value
    const w = v / 2
    const rate = w / item.w
    const h = rate * item.h
    return {
      width: `${w}px`,
      height: `${h}px`,
    }
  }
})

// 瀑布流数据变化处理
function changeList(e: any) {
  // e.name 返回 list1 或 list2，手动将数据追加到相应列
  if (e.name === 'list1') {
    list1.value.push(e.value)
  }
  else if (e.name === 'list2') {
    list2.value.push(e.value)
  }
}

// 商品点击处理
function handleItemClick(item: any) {
  // 跳转到商品详情页
  uni.navigateTo({
    url: `/pages/product/detail?id=${item.id}`,
  })
}
</script>

<!-- @ts-nocheck -->
<template>
  <uv-waterfall
    ref="waterfall"
    v-model="list"
    :add-time="10"
    :left-gap="leftGap"
    :right-gap="rightGap"
    :column-gap="columnGap"
    @change-list="changeList"
  >
    <!-- 第一列数据 -->
    <template #list1>
      <!-- 为了磨平部分平台的BUG，必须套一层view -->
      <view>
        <view
          v-for="item in list1"
          :key="item.id"
          class="waterfall-item"
          @click="handleItemClick(item)"
        >
          <view class="waterfall-item__image">
            <image :src="item.image" mode="widthFix" />
          </view>
          <view class="waterfall-item__ft">
            <view class="waterfall-item__ft__title">
              <text class="value">
                {{ item.title }}
              </text>
            </view>
          </view>
        </view>
      </view>
    </template>

    <!-- 第二列数据 -->
    <template #list2>
      <!-- 为了磨平部分平台的BUG，必须套一层view -->
      <view>
        <view
          v-for="item in list2"
          :key="item.id"
          class="waterfall-item"
          @click="handleItemClick(item)"
        >
          <view class="waterfall-item__image">
            <image :src="item.image" mode="widthFix" />
          </view>
          <view class="waterfall-item__ft">
            <view class="waterfall-item__ft__title">
              <text class="value">
                {{ item.title }}
              </text>
            </view>
          </view>
        </view>
      </view>
    </template>
  </uv-waterfall>
</template>

<style scoped lang="scss">
@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
.waterfall-item {
  overflow: hidden;
  margin-bottom: 10px;
  border-radius: 6px;
  background: #1f1f1f;
}

.waterfall-item__ft {
  padding: 20rpx;
  box-sizing: border-box;

  &__title {
    font-family:
      Alibaba PuHuiTi 2,
      Alibaba PuHuiTi 20;
    font-weight: 400;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;

    .value {
      font-size: 32rpx;
      color: #ffffff;
    }
  }
}
</style>
